import { CommonUtil } from "../../../util/common-util";
import { ShapeBox } from "./component-related/shape-box-interface";
import { BoxStyle } from "./component-related/box-style-model";
import { ShapeBoxBase } from "./component-related/box-base";

export class RoundRectBox extends ShapeBoxBase implements ShapeBox {
    id: string;
    style: BoxStyle;
    ctleft: CanvasRenderingContext2D;
    paint() {
        super.paint();
        let ctx: CanvasRenderingContext2D = this.ctx;
        let width = this.style.rwidth;
        let height = this.style.rheight;
        let radius = 3;
        let keyPoints = [{
            left: 0, top: radius, type: "move"
        }, {
            left: 0, top: 0, type: "bezier"
        }, {
            left: radius, top: 0
        }, {
            left: width - radius, top: 0, type: "lineTo"
        }, {
            left: width, top: 0, type: "bezier"
        }, {
            left: width, top: radius
        }, {
            left: width, top: height - radius, type: "lineTo"
        }, {
            left: width, top: height, type: "bezier"
        }, {
            left: width - radius, top: height
        }, {
            left: radius, top: height, type: "lineTo"
        }, {
            left: 0, top: height, type: "bezier"
        }, {
            left: 0, top: height - radius
        }];
        let mwidth = (CommonUtil.px2num(this.style.width) - width) / 2;
        let mheight = (CommonUtil.px2num(this.style.height) - height) / 2;
        for (let p of keyPoints) {
            p.left += mwidth;
            p.top += mheight;
        }
        this.setCanvasPadding(keyPoints);

        //圆角矩形绘制，线宽为2的时候实际却只有1？？？
        ctx.lineWidth = this.style.lineWidth * 2;
        ctx.fillStyle = this.style.bgColor;
        ctx.strokeStyle = this.style.color;
        ctx.beginPath();
        CommonUtil.draw(ctx, keyPoints);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }
    constructor(data) {
        super(data);
    }
}